import {designPage} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {$message, Button, ButtonGroup, Dropdown, DropdownOption} from "../../../../packages";
import DownOutlined from '@ant-design/icons/DownOutlined';
import AndroidOutlined from '@ant-design/icons/AndroidOutlined';
import AppleOutlined from '@ant-design/icons/AppleOutlined';
import WindowsOutlined from '@ant-design/icons/WindowsOutlined';

export const demo1 = designPage(() => {
  return () => (
    <DemoRow title="基本用法">
      <Dropdown>
        {{
          reference: () => <Button label="Click to open dropdown"/>,
          popper: () => <>
            <DropdownOption label="选项一" val="tag-1" onClick={() => $message('click tag-1')}/>
            <DropdownOption label="选项二" val="tag-2" onClick={() => $message('click tag-2')}/>
            <DropdownOption label="选项三" val="tag-3" onClick={() => $message('click tag-3')}/>
          </>
        }}
      </Dropdown>

      <ButtonGroup style={{ display: 'inline-flex' }}>
        <Button label="Export"/>
        <Dropdown placement="bottomRight">
          {{
            reference: () => <Button icon={<DownOutlined/>}/>,
            popper: () => <>
              <DropdownOption label="export jpg" onClick={() => $message('click tag-1')}/>
              <DropdownOption label="export pdf" onClick={() => $message('click tag-2')}/>
              <DropdownOption label="export source file" onClick={() => $message('click tag-3')}/>
            </>
          }}
        </Dropdown>
      </ButtonGroup>
    </DemoRow>
  );
});


export const demo2 = designPage(() => {
  return () => (
    <DemoRow title="选项内容对其">
      <Dropdown>
        {{
          reference: () => <Button label="Start"/>,
          popper: () => <>
            <DropdownOption label="hello" val="tag-1"/>
            <DropdownOption label="hello world" val="tag-2"/>
            <DropdownOption label="hello world, guys" val="tag-3"/>
          </>
        }}
      </Dropdown>

      <Dropdown placement="bottom">
        {{
          reference: () => <Button label="Center"/>,
          popper: () => <>
            <DropdownOption label="hello" val="tag-1"/>
            <DropdownOption label="hello world" val="tag-2"/>
            <DropdownOption label="hello world, guys" val="tag-3"/>
          </>
        }}
      </Dropdown>

      <Dropdown placement="bottomRight">
        {{
          reference: () => <Button label="End"/>,
          popper: () => <>
            <DropdownOption label="hello" val="tag-1"/>
            <DropdownOption label="hello world" val="tag-2"/>
            <DropdownOption label="hello world, guys" val="tag-3"/>
          </>
        }}
      </Dropdown>

    </DemoRow>
  );
});

export const demo3 = designPage(() => {
  return () => (
    <DemoRow title="插槽">
      <Dropdown>
        {{
          reference: () => <Button label="Start"/>,
          popper: () => <>
            <DropdownOption val="tag-1">
              <div>1. hello</div>
            </DropdownOption>
            <DropdownOption val="tag-2">
              <div>2. hello world</div>
            </DropdownOption>
            <DropdownOption val="tag-3">
              <div>3. hello world, guys</div>
            </DropdownOption>
          </>
        }}
      </Dropdown>
    </DemoRow>
  );
});


export const demo4 = designPage(() => {
  return () => (
    <DemoRow title="滚动条">
      <p>超过6个选项时会自动启用滚动条</p>
      <Dropdown>
        {{
          reference: () => <Button label="Start"/>,
          popper: () => <>
            <DropdownOption>
              <div>1. hello</div>
            </DropdownOption>
            <DropdownOption>
              <div>2. hello world</div>
            </DropdownOption>
            <DropdownOption>
              <div>3. hello world, guys</div>
            </DropdownOption>
            <DropdownOption>
              <div>4. hello</div>
            </DropdownOption>
            <DropdownOption>
              <div>5. hello world, guys</div>
            </DropdownOption>
            <DropdownOption>
              <div>6. hello world, guys</div>
            </DropdownOption>
            <DropdownOption>
              <div>7. hello world, guys</div>
            </DropdownOption>
            <DropdownOption>
              <div>8. hello</div>
            </DropdownOption>
            <DropdownOption>
              <div>9. hello world</div>
            </DropdownOption>
            <DropdownOption>
              <div>10. hello world, guys</div>
            </DropdownOption>
          </>
        }}
      </Dropdown>
    </DemoRow>
  );
});

export const demoIcons = designPage(() => {
  return () => (
    <DemoRow title="选项图标">
      <Dropdown>
        {{
          reference: () => <Button label="option with icon"/>,
          popper: () => <>
            <DropdownOption icon={<AndroidOutlined/>} label="Android"/>
            <DropdownOption icon={<AppleOutlined/>} label="IOS"/>
            <DropdownOption icon={<WindowsOutlined/>} label="Windows"/>
          </>
        }}
      </Dropdown>
    </DemoRow>
  );
});

export const demoDisabled = designPage(() => {
  return () => (
    <DemoRow title="禁用选项">
      <Dropdown>
        {{
          reference: () => <Button label="disable option"/>,
          popper: () => <>
            <DropdownOption val="tag-1">
              <div>1. hello</div>
            </DropdownOption>
            <DropdownOption val="tag-2" disabled>
              <div>2. hello world</div>
            </DropdownOption>
            <DropdownOption val="tag-3">
              <div>3. hello world, guys</div>
            </DropdownOption>
          </>
        }}
      </Dropdown>
    </DemoRow>
  );
});
